<!-- 新版额度结算，暂停了 -->
<template>
  <div class="common-list-container__v2">
    <div class="tabs-menu">
      <el-tabs v-model="tabsMenuValue">
        <el-tab-pane :label="$t('common.base.task')" name="task">{{$t('common.base.task')}}</el-tab-pane>
        <el-tab-pane :label="$t('common.base.mall')" name="mall">{{$t('common.base.mall')}}</el-tab-pane>
        <el-tab-pane 
          v-for="item in tabsMenuList" 
          :key="item.bizId"
          :label="item.displayName"
          :name="item.bizId"
        >
          {{ item.displayName }}
        </el-tab-pane>
      </el-tabs>
    </div>
    <TaskBalanceList v-if="tabsMenuValue === 'task'" />
    <MallBalanceList v-else-if="tabsMenuValue === 'mall'" />
    <PaasBalanceList v-else :type="tabsMenuValue" />
  </div>
</template>

<script>
import { getHaveDateTemplate } from '@src/api/PassApi.js'
import TaskBalanceList from './TaskBalanceList.tsx'
import MallBalanceList from './components/MallBalanceList.vue'
import PaasBalanceList from './components/PaasBalanceList.vue'

export default {
  components: {
    TaskBalanceList,
    MallBalanceList,
    PaasBalanceList,
  },
  data() {
    return {
      tabsMenuValue: 'task',
      tabsMenuList: [],
    }
  },
  mounted() {
    // this.handleGetTabs();
  },
  methods: {
    async handleGetTabs() {
      try {
        const { data, code } = await getHaveDateTemplate({})

        if (code !== 0) return;

        this.tabsMenuList = data;
      } catch (error) {
        console.error('handleGetTabs error', error)
      }
    }
  },
};
</script>

<style lang="scss" scoped>
.tabs-menu {
  background-color: #FFFFFF;
  width: 100%;

  ::v-deep .el-tabs {
    .el-tabs__header {
      box-sizing: border-box;
      height: 40px;
      margin: 0;

      .el-tabs__nav-wrap {
        overflow: visible;

        .el-tabs__nav {
          display: flex;
          border: none;

          .el-tabs__item {
            display: flex;
            align-items: center;
            justify-content: center;
            border: none;

            &.is-active {
              &::before {
                position: absolute;
                bottom: 0;
                width: 100%;
                height: 0;
                content: "";
                border-bottom: 2px solid $color-primary !important;
                transition: transform 0.3s cubic-bezier(0.645, 0.045, 0.355, 1);
              }
            }
          }

          .el-tabs__item:nth-child(2) {
            padding-left: 20px;
          }

          .el-tabs__item:last-child {
            padding-right: 20px;
          }
        }
      }
    }

    .el-tabs__content {
      height: 0;
    }
  }
}
</style>
